<template>
	<view class="container">
		<navbar :title="$t('wode.with')"  :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
			<view class="record" slot="right" @click="navTo('/pages/withdraw/crash')">
				{{$t("common.record")}}
			</view>
		 </navbar>
		<view class="box1">
			<view class="msg">
				<view>
					<view class="msg1">
						{{$currency}}{{userInfo.money}}
					</view>
					<view class="msg3">
						{{ $t("withdraw.withdrawable")}}
					</view>
				</view>
				<view>
					<view class="msg2">
						{{$currency}}{{info.audit_money}}
					</view>
					<view class="msg4">
						{{ $t("withdraw.under")}}
					</view>
				</view>
				
				
				
			</view>
		</view>
		<view class="box2">
			<view class="msg1">
				{{ $t("withdraw.amount")}}
			</view>
			<view class="msg2">
				<input type="text" v-model="money" :placeholder="$currency" />
			</view>
			<view class="msg3">
				<view class="msg4">
					<view class="ser">
						{{ $t("withdraw.service")}}
					</view>
					<view class="act">
						{{ $t("withdraw.actual")}}
					</view>
				</view>
				<view class="msg5">
					<view class="percent">
						{{info.withdraw_fee}}%
					</view>
					<view class="count">
						{{$currency}}{{actualMoney}}
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="box3" @click="bankShow = true">
			<view class="tip1">
				<view class="name" style=" margin: 42rpx 103rpx 33rpx 39rpx;">
					{{ $t("withdraw.name")}}
				</view>
				<view class="" style="margin-top: 44rpx;flex:1;text-align:end;">
					{{bankInfo.bankcard}}
				</view>
				<view class="">
					<image src="../../static/image/team/tu1.png" mode="" style="width: 15rpx;height: 27rpx;margin-top: 40rpx;margin-left: 18rpx;margin-right: 18rpx;"></image>
				</view>
			</view>
			<view class="" style="font-size: 30rpx;font-family: Rubik;font-weight: 300;color: #AAAAAA; margin-left: 39rpx">
				{{ $t("withdraw.hours")}}
			</view>
		</view>
		<view class="box4" style="height:706rpx">
			<view class="warm" style="font-size: 28rpx;font-family: Rubik;font-weight: 400;color: #AAAAAA;">
				<view class="" style="background: #AAAAAA; width: 120rpx;height: 2rpx; margin-top: 10rpx;
				margin-right: 19rpx;">
				</view>
				<view class="">
					{{ $t("withdraw.warm")}}
				</view>
				<view class="" style="background: #AAAAAA; width: 120rpx;height: 2rpx; margin-top: 10rpx;
				margin-left: 19rpx;">
				</view>
			</view>
			<view class="case" style="margin:0 40rpx; font-size: 32rpx;font-family: Rubik;font-weight: 400;color: #0F0F0E;">
				<view v-html="systemInfo.withdraw_desc"></view>
			</view>
			<view class="immediate">
				<overbtn :btnText="$t('withdraw.immediate')" @btnAction="onConfirm" :fontSize="24" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
			</view>
		</view>
		<u-popup v-model="bankShow" mode="bottom" border-radius="20">
				<scroll-view scroll-y="true" class="" style="padding-bottom: 100rpx;" v-if="bankList != ''">
					<view class="bankList" >
						<view class="" v-for="(item,index) in bankList" :key="item.id" @click="checkboxChange(item.id)">
							<view class="bankBox" >
								<view class="name">
									{{getBankName(item.bankname)}}
								</view>
								<view class="default" v-if="item.default">
									{{ $t("withdraw.default")}}
								</view>
								<!-- <u-checkbox 
									@change="select"
									:name="item.id"
									v-model="item.select" 
								></u-checkbox> -->
								<view style="width: 32rpx;height:32rpx; " v-if="item.select">
								     <image src="@/static/image/address/checked_icon.png" style="width: 32rpx;height:32rpx;" mode="" />
								</view>
								<view style="width: 32rpx;height:32rpx ;border: 2rpx solid #C8C8C8;background: #ECECEC;"
								  v-else></view>
							</view>
							
							<view class="bankcard">
								{{item.bankcard}}
							</view>
						</view>
					</view>
					<view class="popbutton">
						<view class="button" @click="bankShow = false">
							{{ $t("withdraw.cancel")}}
						</view>
						<view class="button" @click="onBankConfirm">
							{{ $t("withdraw.confirm")}}
						</view>
					</view>
				</scroll-view>
				<view class="elseList" v-else>
					<view  style="width: 80rpx;margin: 120rpx 335rpx 0rpx;height: 80rpx;" @click="navTo('/pages/Addbank/Addbank')">
						<image src="../../static/image/pay/add.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
					</view>
					<view class="no" @click="navTo('/pages/Addbank/Addbank')">
						{{ $t("withdraw.no")}}
					</view>
					<view class="add" @click="navTo('/pages/Addbank/Addbank')">
						{{ $t("withdraw.add")}}
					</view>
				</view>
		</u-popup>
		<userlog type="2" :showPopup="showWithdraw" @showClose="showWithdraw = false"></userlog>
	</view>
</template>

<script>
	import {
		setting,
		userwithdraw
	} from '@/api/money.js'
	import {
		getbanklist,
		bankcodelist
	} from '@/api/bank.js'
	export default {
		data() {
			return {
				bankShow: false,
				info: {},
				money: '',
				bankList: [],
				bankInfo: {},
				show: 1,
				showWithdraw: false,
				bankCode: []
			};
		},
		onLoad() {
			this.loadBankCode();
			this.load();
		},
		onShow() {
			this.loadBank();
		},
		computed: {
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			actualMoney() {
				let rate = this.info.withdraw_fee || 0;
				return (this.money / 100 * (100 - rate)).toFixed(2) || 0
			}
		},
		methods: {
			getBankName(val) {
				for (let i of this.bankCode) {
					if (i.value == val) {
						return i.label;
					}
				}
				return '';
			},
			async loadBankCode(){
				let result = await bankcodelist()
				this.bankCode = result
			},
			async load() {
				let result = await setting();
				this.info = result;
			},
			async loadBank() {
				let result = await getbanklist();
				for(let i=0; i<result.length ;i++){
					if (result[i].default) {
						result[i].select = true
					} else {
						result[i].select = false
					}
				}
				this.bankList = result;
				console.log(this.bankList)
			},
			async onEditClick() {
				uni.showLoading({
				});
				let result = await profile({
					nickname: this.value
				})
				this.$store.dispatch('getUserInfo');
				uni.hideLoading();
			},
			onBankConfirm(e) {
				for (let i of this.bankList) {
					if (i.select == true) {
						this.bankInfo = i;
					}
				}
				this.bankShow = false;
			},
			onConfirm() {
				if (!this.money ) {
					uni.showToast({
						position: 'center',
						title: this.$t('new.withamount'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (Number(this.money) < Number(this.info.min_withdraw)) {
					uni.showToast({
						position: 'center',
						title: this.$t('new.withgreater',{price: this.info.min_withdraw}),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (Number(this.money) > Number(this.userInfo.money)) {
					uni.showToast({
						position: 'center',
						title: this.$t('new.withless',{price: this.userInfo.money}),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.bankInfo.id) {
					uni.showToast({
						position: 'center',
						title: this.$t('new.withbank'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.showModal({
					title: this.$t('home.reminder'),
					content: this.$t('new.withlower'),
					cancelText: this.$t('new.giveup'),
					confirmText: this.$t('common.confirm'),
					cancelColor: this.$utypeprimary,
					confirmColor: '#aaa',
					success: (e) => {
						if (e.cancel) {

						}
						if (e.confirm) {
							this.onWithdraw();
						}
						// 下载文件资源到本地，下载刚才打包的 .wgt文件
					},
					fail:() => {

					}
				});
			},
			onWithdraw() {
				if (!this.userInfo.is_set_withdraw_password) {
					this.showWithdraw = !this.showWithdraw;
					return;
				}
				uni.navigateTo({
					 url: `../Withdrawalpassword/Withdrawalpassword?price=${this.money}&bank_id=${this.bankInfo.id}`
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// select(e){
			// 	for(let i=0 ;i<this.bankList.length ;i++){
			// 		this.bankList[i].select = false
			// 		if(e.name != this.bankList[i].id){
			// 			this.bankList[i].select = false
			// 		}
			// 	}
			// },
			checkboxChange(item){
			        for (let i of this.bankList) {
			          if (i.id == item) {
			            i.select = true;
			          } else {
			            if (i.id !== undefined) {
			              i.select = false;
			            }
			          }
			          this.$forceUpdate()
			        }
			      },
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #F6F6F6;
		.record {
			color:#fff;
			display: flex;
			justify-content: center;
			position: absolute;
			right: 34rpx;
			width: 120rpx;
			height: 38rpx;
		}
		.box1{
			background: #FFFFFF;
			overflow: hidden;
		}
	}
	.msg{
		overflow: hidden;
		margin: 40rpx;
		width: 670rpx;
		height: 155rpx;
		background: #0F0F0E;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		.msg1{
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			color: $u-type-primary;
			line-height: 28rpx;
		}
		.msg2{
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			color: $u-type-primary;
			line-height: 28rpx;
		}
		.msg3{
			// margin-right: 117rpx;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #ECECEC;
			line-height: 20rpx;
		}
		.msg4{
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #ECECEC;
			line-height: 20rpx;
		}
	}
	
	.box2{
		overflow: hidden;
		margin-top: 20rpx;
		height: 394rpx;
		width: 750rpx;
		background: #FFFFFF;
		.msg1{
			margin: 40rpx  0 40rpx 40rpx;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 22rpx;
		}
		.msg2{
			margin-left: 40rpx;
			margin-right: 40rpx;
			border-bottom: solid 1rpx #AAAAAA;
			input {
				font-size: 72rpx;
			}
		}
		.msg3{
			margin-left: 40rpx;
			margin-right: 40rpx;
			display: flex;
			justify-content: space-between;
			.msg4{
				line-height: 28rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
			}
			.msg5{
				text-align: end;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				line-height: 22rpx;
			}
		}
	}
		
	.ser{
		margin-top: 60rpx;
	}
	.act{
		margin-top: 40rpx;
	}
	.percent{
		margin-top: 66rpx;
	}
	.count{
		margin-top: 50rpx;
	}
	
	.box3{
		overflow: hidden;
		margin-top: 20rpx;
		height: 158rpx;
		width: 750rpx;
		background: #FFFFFF;
		.tip1{
			display: flex;
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 23rpx;
			
		}
	}
	.box4{
		.warm{
			display: flex;
			margin: 100rpx 137rpx 0rpx;
		}
		.immediate{
			width: 670rpx;
			height: 90rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
			line-height:90rpx ;
			text-align: center;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #fff;
			margin: 100rpx 40rpx 0;
					}
	}
	
	.bankList{
		padding: 27rpx 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		width: 750rpx;
		height: 642rpx;
		.bankBox{
			margin-top: 45rpx;
			display: flex;
			align-items: center;
			position: relative;
			.name{
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #65676B;
				margin-right: auto;
			}
			.default{
				position: absolute;
				left: 175rpx;
				top: 6rpx;
				width: 94rpx;
				height: 30rpx;
				font-size: 22rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #FFFFFF;
				background-image: url(../../static/image/pay/defaultbg.png);
				background-size: 94rpx 30rpx;
				text-align: center;
			}
			
		}
		.bankcard{
			font-size: 32rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin-top: 54rpx;
			padding-bottom: 40rpx;
			line-height: 32rpx;
			border-bottom: 1rpx solid #efefef;
		}
	}
	
	.popbutton{
		position: fixed;
		bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		width: 670rpx;
		margin: 0 40rpx;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		.button{
			width: 320rpx;
			height: 90rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
		}
	}
	
	.elseList{
		width: 750rpx;
		height: 513rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		overflow: hidden;
		color:#fff;
		.no{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			margin-top: 30rpx;
			text-align: center;
			line-height: 30rpx;
		}
		.add{
			width: 670rpx;
			height: 90rpx;
			background: $u-type-primary;
			border-radius: 10rpx;
			margin: 140rpx 40rpx 0;
			line-height: 90rpx;
			text-align: center;
		}
	}
	/deep/.u-drawer-bottom{
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	/deep/ .uni-modal__bd {
		color: #0F0F0E;
		font-weight: 500;
	}
</style>
